<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>发布新投票</title>
	<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
	<script src="js/vote.js"></script>
</head>
<body>
<div id="app">
	<vote>
		<div id="voteManage" class="box">
			<h2>添加新投票</h2>
			<div class="content">
				<form method="post" action="view.html">
					<dl>
						<dt>投票内容：</dt>
						<dd>
							<input type="hidden" name="entityId" value=""/>
							<input type="text" class="input-text" v-model="vote.vname"  value=""/>
							<br/>
							<span v-if="showErrors && !vote.vname.trim()" class="error-message">投票内容不能为空</span>
						</dd>
						<dt>投票类型：</dt>
						<dd>
							<input type="radio" v-model="vote.vtype" value="单选" />单选
							<input type="radio" v-model="vote.vtype" value="多选" />多选
							<br/>
							<span v-if="showErrors && !vote.vtype" class="error-message">请选择投票类型</span>
						</dd>
						<!-- 修改日期输入格式 -->
						<dt>开始时间：</dt>
						<dd>
							<input type="date" class="input-text" v-model="vote.startDate" />
							<br/>
							<span v-if="showErrors && !vote.startDate" class="error-message">请选择开始时间</span>
						</dd>
						<dt>结束时间：</dt>
						<dd>
							<input type="date" class="input-text" v-model="vote.endDate" />
							<br/>
							<span v-if="showErrors && !vote.endDate" class="error-message">请选择结束时间</span>
							<span v-if="showErrors && vote.startDate && vote.endDate && new Date(vote.startDate) > new Date(vote.endDate)" class="error-message">结束时间不能早于开始时间</span>
						</dd>
						<dt>投票选项：</dt>

						<dd id="voteoptions">
							<p v-for="(i, index) in vote.items" :key="index">
								<input type="text" class="input-text" v-model="i.iname" />
								<br/>
								<span v-if="showErrors && !i.iname.trim()" class="error-message">选项不能为空</span>
							</p>
						</dd>

						<dt></dt>
						<dd class="button">
							<input type="image" @click.prevent="validateAndSubmit" src="images/button_submit.gif" />
							<a href="#" @click.prevent="vote.items.push({iname:''})">增加选项</a>
							<a href="index.html">取消操作</a>
						</dd>
					</dl>
				</form>
			</div>
		</div>
	</vote>
</div>
<script>
	var app = new Vue({
		el: '#app',
		data:{
			vote:{
				vname: "",
				vtype: "",
				startDate: "",
				endDate: "",
				items: [{iname:""},{iname:""}]
			},
			showErrors: false
		},
		methods:{
			validateAndSubmit(){
				// 重置错误显示状态
				this.showErrors = true;

				// 检查投票内容是否为空
				if(!this.vote.vname || this.vote.vname.trim() === ''){
					this.$alert('请填写投票内容');
					return;
				}

				// 检查投票类型是否选择
				if(!this.vote.vtype){
					this.$alert('请选择投票类型');
					return;
				}

				// 检查开始时间是否为空
				if(!this.vote.startDate){
					this.$alert('请选择开始时间');
					return;
				}

				// 检查结束时间是否为空
				if(!this.vote.endDate){
					this.$alert('请选择结束时间');
					return;
				}

				// 检查开始时间是否晚于结束时间
				if(new Date(this.vote.startDate) > new Date(this.vote.endDate)){
					this.$alert('结束时间不能早于开始时间');
					return;
				}

				// 检查是否有任何选项为空
				const hasEmptyOption = this.vote.items.some(item => !item.iname || item.iname.trim() === '');

				if(hasEmptyOption){
					// 如果有选项为空，不提交表单，错误信息会通过v-if自动显示
					this.$alert('请填写所有选项');
				} else {
					// 所有选项都不为空，提交表单
					this.add();
				}
			},
			add(){
				// 创建要提交的数据对象，确保日期格式正确
				const submitData = {
					vname: this.vote.vname,
					vtype: this.vote.vtype,
					startDate: this.vote.startDate,
					endDate: this.vote.endDate,
					items: this.vote.items
				};

				console.log('提交的数据:', submitData); // 调试用

				axios.post("vote/add", submitData).then(res=>{
					if(res.data.code == 1){
						// 添加成功,跳转首页
						location.href = "index.html";
					} else {
						if(res.data.data){
							// errors 字段错误
							let errorMsg = res.data.msg;
							// 显示具体的验证错误信息
							if(res.data.data.length > 0) {
								errorMsg += '\n' + res.data.data.map(err => err.defaultMessage).join('\n');
							}
							this.$alert(errorMsg);
							console.info('详细错误:', res.data.data);
							// 显示所有错误
							this.showErrors = true;
						} else {
							this.$alert(res.data.msg);
						}
					}
				}).catch(error => {
					console.error('请求错误:', error);
					this.$alert('网络请求失败，请稍后重试');
				});
			}
		}
	});
</script>
</body>
</html>